<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import { getRoleService, syntheticSpeechService } from '@/api/tools'

const role = ref('')
const showRolePicker = ref(false)
const rolesColumns = [
  // { text: '杭州', value: 'Hangzhou' },
  // { text: '宁波', value: 'Ningbo' },
  // { text: '温州', value: 'Wenzhou' },
  // { text: '绍兴', value: 'Shaoxing' },
  // { text: '湖州', value: 'Huzhou' }
]
// 获取角色列表
onMounted(async () => {
  const roles = await getRoleService()
  // console.log(roles.data)
  roles.data.characters.map((element) => {
    rolesColumns.push({
      text: element,
      value: element
    })
  })
})
const onConfirm = ({ selectedOptions }) => {
  role.value = selectedOptions[0]?.text
  showRolePicker.value = false
}

// 文本内容
const message = ref('')
// 返回音频地址
const mp3Url = ref('')
// 提交
const onSubmit = async () => {
  console.log(role.value, message.value)
  const mp3 = await syntheticSpeechService(message.value, role.value)
  mp3Url.value = mp3.data.mp3
}
</script>

<template>
  <div class="tool-box-1">
    <div class="tool-box-1-header">
      <van-nav-bar
        fixed
        :placeholder="true"
        title="语音合成"
        left-arrow
        @click-left="router.go(-1)"
      />
    </div>
    <!-- <div class="tool-box-1-test">
      <span>
      </span>
    </div> -->
    <div class="tool-box-1-content">
      <van-form @submit="onSubmit">
        <van-cell-group>
          <van-field
            v-model="role"
            is-link
            readonly
            name="picker"
            label="角色"
            placeholder="点击选择角色"
            @click="showRolePicker = true"
            :rules="[{ required: true, message: '请选择角色' }]"
          />
          <van-popup v-model:show="showRolePicker" position="bottom">
            <van-picker
              :columns="rolesColumns"
              @confirm="onConfirm"
              @cancel="showRolePicker = false"
            />
          </van-popup>

          <van-field
            v-model="message"
            rows="2"
            autosize
            label="合成文字内容"
            type="textarea"
            maxlength="100"
            placeholder="请输入内容"
            show-word-limit
            :rules="[{ required: true, message: '请输入内容' }]"
          />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
      <div style="text-align: center">
        <audio :src="mp3Url" controls></audio>
      </div>
    </div>
  </div>
</template>
<style scoped></style>
